﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>打印</title>
    <link href="css/hiprint.css" rel="stylesheet" />
    <link href="css/print-lock.css" rel="stylesheet" />
    <!--http://hiprint.io/demo/demo3-->
    <!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">-->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <link href="../Scripts/Editor/LayUI/css/layui.css" rel="stylesheet" />
    <script src="../Scripts/Editor/LayUI/layui.js"></script>
</head>
<body>
    <div class="layui-container">
        <div class="layui-row">        
            <a id="A4_directPrint" class="btn hiprint-toolbar-item " style="color: #fff; background-color: #d9534f;  border-color: #d43f3a;">打印</a>  
        </div>
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="prevViewDiv"></div>
            </div>
        </div>
    </div>
    <div style="display:none;">
        <div id="hiprint-printTemplate" class="hiprint-printTemplate">

        </div>
    </div>
    <!--[[ 测试专用  单独使用无需引入-->
    <script src="custom_test/custom-etype-provider.js"></script>
    <!--单独使用无需引入  -->
    <script src="polyfill.min.js"></script>
    <script src="plugins/jquery.minicolors.min.js"></script>
    <script src="plugins/JsBarcode.all.min.js"></script>
    <script src="plugins/qrcode.js"></script>
    <script src="hiprint.bundle.js"></script>
    <script src="plugins/jquery.hiwprint.js"></script>
    <script>
        var customPrintJson = { "panels": [{ "index": 0, "paperType": "A4", "height": 297, "width": 210, "paperHeader": 9, "paperFooter": 841.8897637795277, "printElements": [{ "options": { "left": 454.5, "top": 22.5, "height": 23, "width": 72, "field": "barcode", "testData": "1234556", "textType": "barcode" }, "printElementType": { "title": "文本", "type": "text" } }, { "options": { "left": 9, "top": 70.5, "height": 157.5, "width": 550, "field": "table", "textAlign": "center", "columns": [[{ "title": "序号", "field": "num", "width": 123.70139497041419, "colspan": 1, "rowspan": 1, "checked": true }, { "title": "姓名", "field": "name", "width": 144.78972928994085, "colspan": 1, "rowspan": 1, "checked": true }, { "title": "性别", "field": "sex", "width": 131.79349112426038, "colspan": 1, "rowspan": 1, "checked": true }, { "title": "出生日期", "field": "birth", "width": 149.71538461538458, "colspan": 1, "rowspan": 1, "checked": true }]] }, "printElementType": { "title": "表格", "type": "tableCustom" } }], "paperNumberLeft": 565, "paperNumberTop": 819, "paperNumberDisabled": true }] };
        var printData = {
            name: '黄磊',
            barcode: 'yy12321',
            password: '12346',
            table: [
                { num: '1', name: '王小可', sex: '男', count: '120', amount: '9089元' },
                { num: '2', name: '梦之遥', sex: '女', count: '20', amount: '89元' },
                { num: '3', name: '梦之遥', sex: '女', count: '720', amount: '29089元' }

            ]
        };
        var hiprintTemplate;
        $(document).ready(function () {
            //初始化打印插件
            hiprint.init({
                providers: [new customElementTypeProvider()]
            });
            hiprintTemplate = new hiprint.PrintTemplate({
                template: customPrintJson,
                settingContainer: '#PrintElementOptionSetting',
                paginationContainer: '.hiprint-printPagination'
            });
            //打印设计
            hiprintTemplate.design('#hiprint-printTemplate');
            //打印事件
            $('#A4_preview').click(function () {
                var htmls = hiprintTemplate.getHtml(printData);
                $('.prevViewDiv').html(htmls)
            });
        });

        //调整纸张
        var setPaper = function (paperTypeOrWidth, height) {
            hiprintTemplate.setPaper(paperTypeOrWidth, height);
        }

        //旋转
        var rotatePaper = function () {
            hiprintTemplate.rotatePaper();
        }
        var clearTemplate = function () {
            hiprintTemplate.clear();
        }
        var myMsg = layer.msg("打印数据加载中...", {
            icon: 16,
            time: -1
        })

        setTimeout(function () {
            var htmls = hiprintTemplate.getHtml(printData);
            console.log(htmls);
            $('.prevViewDiv').html(htmls)
            layer.close(myMsg);
        }, 1000)
       
    </script>


</body>
</html>